<template>
    <div class="edit-field">
        <div class="body row">
            <div class="label">{{ option.label }}</div>

            <!-- 文本 -->
            <div v-if="option.type === 'text'" class="field field-text">
                <input
                    v-model="value"
                    :type="option.type"
                    :maxlength="option.maxlength"
                    :key="option.key"
                    @input="onInput"
                />
            </div>

            <div class="btn-confirm" v-show="active" @click="onConfirm">
                确定
            </div>

            <!-- 图片 -->
            <div
                v-if="option.type === 'image'"
                class="field field-img-uploader"
            >
                <ImgUploader v-model="value" @complete="updateUserAvatarUrl" />
            </div>

            <!-- 单选 -->
            <div
                v-if="option.type === 'picker'"
                class="field field-picker"
                @click="showPicker"
            >
                <Picker
                    ref="picker"
                    v-model="value"
                    :title="option.placeholder"
                    :range="option.range"
                    @change="onConfirm"
                />
            </div>

            <!-- 省市选择 -->
            <div
                v-if="option.type === 'area'"
                class="field field-picker-area"
                @click="showPickerArea"
            >
                <PickerArea
                    ref="pickerArea"
                    v-model="value"
                    :title="option.placeholder"
                    @change="onConfirm"
                />
            </div>

            <!-- <div class="btn-open icon" v-if="option.type !== 'text'">
                <img :src="require('@/assets/icon/right.png')" />
            </div> -->
        </div>
    </div>
</template>

<script>
import ImgUploader from "@/components/common/imgUploader/index";
import Picker from "@/components/common/picker/index";
import PickerArea from "@/components/common/pickerArea/index";
export default {
    components: {
        ImgUploader,
        Picker,
        PickerArea
    },
    props: {
        option: {
            type: Object,
            default() {
                return {
                    type: "text", // image picker area
                    label: "标题",
                    maxlength: 8,
                    key: "nickName",
                    value: null
                };
            }
        }
    },
    data() {
        return {
            active: false,
            value: null
        };
    },

    created() {
        this.value = this.option.value;
    },

    methods: {
        onInput() {
            this.active = true;
        },

        onConfirm() {
            const key = this.option.key;
            const value = this.value;
            console.log("更新用户信息", {
                [key]: value
            });
            if (!key || !value || key.length <= 0) {
                return;
            }
            if (key === "location") {
                this.updateLocation(value);
                return;
            }
            this.$login
                .updateUser({
                    [key]: value
                })
                .then(res => {
                    this.onComplete();
                })
                .catch(err => {
                    this.$showToast("系统异常");
                });
        },

        updateLocation(location) {
            this.$login
                .updateUser({
                    country: location.country,
                    province: location.province,
                    city: location.city
                })
                .then(res => {
                    this.onComplete();
                })
                .catch(err => {
                    this.$showToast("系统异常");
                });
        },

        updateUserAvatarUrl({ fileID }) {
            console.log("更新用户头像", fileID);
            this.$login
                .updateUser({
                    avatarUrl: fileID
                })
                .then(res => {
                    this.onComplete();
                })
                .catch(err => {
                    this.$showToast("系统异常");
                });
        },

        onComplete() {
            this.$showToast("更新信息成功");
            this.active = false;
        },

        // 打开性别选择器
        showPicker() {
            const pickerComp = this.$refs.picker;
            console.log(pickerComp);
            pickerComp.showPicker();
        },

        // 打开省市选择器
        showPickerArea() {
            const pickerAreaComp = this.$refs.pickerArea;
            pickerAreaComp.showPickerArea();
        }
    }
};
</script>


<style lang="less" scoped>
.edit-field {
    background: #fff;
    padding: 0 40px;

    .body {
        padding: 30px 0;
        border-bottom: 1px solid #eee;
        align-items: center;

        .label {
            padding-right: 50px;
        }

        .field {
            flex: 1 1 auto;
            input {
                text-align: right;
            }
        }
        .field-img-uploader,
        .field-picker,
        .field-picker-area {
            text-align: right;
        }

        .btn-confirm {
            padding-left: 30px;
            color: #07c160;
        }

        .btn-open {
            width: 30px;
            display: flex;
            align-items: center;
            padding-left: 30px;
        }
    }
}
</style>